<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>案例练习</title>
</head>
<style>
    /* 请放入通用CSS里 */
</style>

<body>
    <div class="purchaseMask"
        style="width: 100%;height: 100%;background-color: rgba(153, 153, 153, 0.3);position: fixed;">
        <div class="purchaseCard" style="
    width: 700px;height: 488px;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    margin: 10px;
    border: 1px solid #bfbfbf;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    background-color: #fff;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;">
            <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: currentcolor none medium;"
                aria-hidden="true"></div>
            <div class="yqq-dialog-content" style="
        position: relative;
        background-color: #fff;
        border: none;
        border-radius: 6px 6px;
        background-clip: padding-box;">
                <button type="button" aria-label="Close" class="yqq-dialog-close" style="
            display: inline-block;
            width: 24px;height: 24px;
            cursor: pointer;
            border: 0;
            background: transparent;
            font-size: 24px;
            position: absolute;
            top: 6px;
            right: 6px;
            line-height: 1;
            color: #999;
            text-decoration: none;
            z-index: 10;">
                    <span class="yqq-dialog-close-x"></span>
                </button>
                <div class="yqq-dialog-body">
                    <div class="login-box">
                        <div class="login-box-hd" style="
                    position: relative;
                    line-height: 55px;
                    text-align: center;
                    border-bottom: 1px solid #f2f2f2;">
                            <h2 class="login-box-tit" style="
                        font-size: 16px;font-weight: 400;">
                                <a class="login-box-tit__item current" style="
                            color: #31c27c;
                            cursor: pointer;
                            margin: 0 60px;">QQ登录</a>
                                <a class="login-box-tit__item" style="
                            cursor: pointer;
                            margin: 0 60px;">微信登录</a>
                            </h2>
                        </div>
                        <div class="login-box-bd" style="
                    position: relative;
                    overflow: hidden;
                    height: 348px;">
                            <div class="login-box-bd__item current" style="
                        font-size: 14px;
                        color: #333;">
                                <iframe scrolling="no"
                                    src="https://graph.qq.com/oauth2.0/authorize?response_type=code&amp;client_id=100497308&amp;redirect_uri=https%3A%2F%2Fy.qq.com%2Fportal%2Fwx_redirect.html%3Flogin_type%3D1%26surl%3Dhttps%3A%2F%2Fy.qq.com%2F&amp;state=state&amp;display=pc"
                                    id="login_frame" name="login_frame" class="login-box-bd__ifr login-box-bd__ifr_qq"
                                    width="100%" height="400" frameborder="0"></iframe>
                            </div>
                            <div class="login-box-bd__item"><iframe scrolling="no"
                                    src="https://open.weixin.qq.com/connect/qrconnect?appid=wx48db31d50e334801&amp;redirect_uri=https%3A%2F%2Fy.qq.com%2Fportal%2Fwx_redirect.html%3Flogin_type%3D2%26surl%3Dhttps%3A%2F%2Fy.qq.com%2F&amp;response_type=code&amp;scope=snsapi_login&amp;state=STATE&amp;href=https%3A%2F%2Fy.qq.com%2Fmediastyle%2Fmusic_v17%2Fsrc%2Fcss%2Fpopup_wechat.css%23wechat_redirect"
                                    id="_login_frame_wechat_" name="_login_frame_wechat_"
                                    class="login-box-bd__ifr login-box-bd__ifr_wx" width="100%" height="400"
                                    frameborder="0"></iframe>
                                <div class="login-box-bd__wx-tips">QQ与微信账号的音乐资产、付费特权不互通</div>
                            </div>
                        </div>
                        <div class="login-box-download"><a class="login-box-download__btn">下载客户端 体验更多内容</a></div>
                    </div>
                </div>
            </div>
            <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: currentcolor none medium;"
                aria-hidden="true"></div>
        </div>
    </div>
</body>
<script>

</script>

</html>